<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
    </table-ext>

    <!-- 查看子项 -->
    <el-dialog title="查看字典子项" :visible.sync="dialogFormVisible">
      <div style="padding-bottom: 10px">
        <el-button type="danger" @click="createDicItem('dicItemForm')" icon="el-icon-circle-plus">新增</el-button>
      </div>
      <el-table :data="dicItemTableData" border style="width: 100%;" height="400">
        <el-table-column prop="code" label="子项编码" width="180" show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="name" label="子项名称" width="220" show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="remarks" label="子项备注" width="280" show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新增字典子项" :visible.sync="subDialogFormVisible">
        <el-form :model="dicItemForm" :rules="rules" ref="dicItemForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="子项编码：" prop="code">
                <el-input v-model="dicItemForm.code" placeholder="请输入子项编码"></el-input>
            </el-form-item>
            <el-form-item label="子项名称：" prop="name">
                <el-input v-model="dicItemForm.name" placeholder="请输入子项名称"></el-input>
            </el-form-item>
            <el-form-item label="子项备注：" prop="remarks">
                <el-input v-model="dicItemForm.remarks" placeholder="请输入子项备注"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('dicItemForm')">立即创建</el-button>
              <el-button @click="resetForm('dicItemForm')">重置</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return {
        dicItemTableData: [],
        dialogFormVisible: false,
        subDialogFormVisible: false,
        dicCode: '',
        dicItemForm:{
          categoryId: '',
          code: '',
          name: '',
          remarks: ''
        },
        rules: {
          code: [
            { required: true, message: '请输入子项编码', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入子项名称', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ],
          remarks: [
            { required: false, message: '请输入子项备注', trigger: 'blur' },
            { min: 0, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ]
        },
        config:{ // 页面共通配置
          title: '数据字典查询', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: false, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.system + '/common/sysdictionary/query'
            }
          }          
        },

        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '字典编码', 
          //数据字段
          key: 'code', 
          //标签类型
          type: 'input' 
        },{
          label: '字典名称',
          key: 'name',
          type: 'input'
        }],

        // 表格列定义
        columns:[{ // 表格列定义
          label: '操作', // 表格header
          width: '100',
          render:(h, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return h('div', {}, [
              h('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                    _this.dicItemForm.categoryId = params.row.id;
                    _this.dicCode = params.row.code;
                    _this.getDicData(params.row.code).then((data)=>{
                      _this.dicItemTableData = data;
                    });

                    _this.dialogFormVisible = true;
                  }
                }
              }, '查看子项')
            ]);
          }
        },{
          label: '字典编码',
          key: 'code'
        },{
          label: '字典名称',
          key: 'name'
        },{
          label: '字典描述',
          key: 'remarks',
          type: 'input'
        }]   
      };
    },
    mounted(){ // VUE页面渲染之后调用的方法
    },
    methods: {
      createDicItem(formName) {
        this.subDialogFormVisible = true;
        //this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post(this.lib.config.host.system + '/system/dicmgt/dictionary/saveOrUpdate', this.dicItemForm).then((res) =>{
              if (res.data.success) {
                this.$message({ type: 'success', message: '操作成功!' });
                this.subDialogFormVisible = false;
                this.getDicData(this.dicCode).then((data)=>{
                  this.dicItemTableData = data;
                });
                this.$refs[formName].resetFields();
              }
            }).catch((error) => {
              this.$message({ type: 'info', message: '操作失败!' });
            })
          } else {
            return false;
          }
        });        
      }
    }
  }
</script>